import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import { Button } from 'antd-mobile';
import { Carousel, WhiteSpace, WingBlank, SearchBar } from 'antd-mobile';
import { TabBar, Icon } from 'antd-mobile';
import LifePage from './components/LifePage';
import KoubeiPage from './components/KoubeiPage';
import FriendsPage from './components/FriendsPage';
import MyPage from './components/MyPage';


export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'redTab',
        };
    }
    renderContent(pageText) {
        if(pageText=="生活 Tab"){
            return (<LifePage/>);
        }else if(pageText=="口碑 Tab"){
            return (<KoubeiPage/>);
        }else if(pageText=="朋友 Tab"){
            return (<FriendsPage/>);
        }else if(pageText=="我的 Tab"){
            return (<MyPage/>);
        }
        
    }
    onChangeTab(tabName) {
        this.setState({
            selectedTab: tabName,
        });
    }

    render() {
        return (
            <TabBar unselectedTintColor="#949494" tintColor="#33A3F4" barTintColor="white">
                <TabBar.Item title="生活" icon={require('./img/tab-bar/alipay.png')} selectedIcon={require('./img/tab-bar/alipay_sel.png')} badge={'new'} selected={this.state.selectedTab === 'blueTab'} onPress={() => this.onChangeTab('blueTab')}>
                    {this.renderContent('生活 Tab')}
                </TabBar.Item>
                <TabBar.Item icon={require('./img/tab-bar/koubei.png')} selectedIcon={require('./img/tab-bar/koubei_sel.png')} title="口碑" badge={2} selected={this.state.selectedTab === 'redTab'} onPress={() => this.onChangeTab('redTab')}>
                    {this.renderContent('口碑 Tab')}
                </TabBar.Item>
                <TabBar.Item icon={require('./img/tab-bar/friend.png')} selectedIcon={require('./img/tab-bar/friend_sel.png')} title="朋友" selected={this.state.selectedTab === 'greenTab'} onPress={() => this.onChangeTab('greenTab')}>
                    {this.renderContent('朋友 Tab')}
                </TabBar.Item>
                <TabBar.Item icon={require('./img/tab-bar/busi.png')} selectedIcon={require('./img/tab-bar/busi_sel.png')} title="我的" selected={this.state.selectedTab === 'yellowTab'} onPress={() => this.onChangeTab('yellowTab')}>
                    {this.renderContent('我的 Tab')}
                </TabBar.Item>
            </TabBar>
        );
    }
}

const styles = StyleSheet.create({
    imageStyle: {
        width: 400,
        height: 150,
    },
    wrapper: {
        backgroundColor: '#fff',
    },
    container: {
        flexGrow: 1,
        alignItems: 'center',
        justifyContent: 'center',
        height: 150,
    },
    text: {
        color: '#fff',
        fontSize: 36,
    },
});